<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/vant.css" />
</head>
<style>
    html,
    body {
        background-color: #fbf9f9;
    }

    .topDiv {
        padding: 0.8rem 0.5rem;
        font-size: 0.8rem;
        background-color: #dce8f4;
    }

    .topDiv .title {
        padding-bottom: 0.8rem;
        font-size: 1rem;
        color: #2882e1;
    }

    .topDiv .subtitle {
        padding-bottom: 0.5rem;
    }

    .topDiv .subtitle:last-child {
        padding: 0;
    }

    .main {
        width: 100%;
    }

    .main .item {
        padding: 0.5rem 0.8rem;
        border-bottom: 6px solid #f2f0f0;
    }

    .main .item .title {
        padding: 0 0.5rem;
        border-left: 3px solid #2882e1;
        height: 1rem;
        line-height: 1rem;
        font-size: 0.8rem;
    }

    .main .item .title span {
        float: right;
    }

    .main .item textarea {
        width: 100%;
        padding: 0.5rem 0;
        font-size: 0.7rem;
        height: 3rem;
        margin-top: 0.5rem;
    }

    .main .upload_img {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .main .upload_img .img {
        margin-top: 0.2rem;
        width: 23%;
        margin-right: 1%;
        position: relative;
    }

    .main .upload_img .img img {
        width: 100%;
        height: 100%;
        object-fit: scale-down;
    }

    .main .upload_img .img .icon_del {
        position: absolute;
        left: 0;
        top: 0;
        width: 0.6rem;
        height: 0.6rem;
    }

    .main .example {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .main .example img {
        margin-top: 0.2rem;
        width: 50%;
        margin-right: 1%;
        object-fit: scale-down;
    }

    .main .item .text {
        font-size: 0.6rem;
        color: #999;
        line-height: 1rem;
        margin: 0.5rem 0;
    }

    .tip {
        background-color: #f2f0f0;
        padding: 0.5rem 0.8rem;
    }

    .tip .text {
        font-size: 0.6rem;
        color: #099b8b;
    }

    .tip .text img {
        width: 1rem;
        height: 1rem;
        float: left;
        margin-right: 0.5rem;
    }

    .tip .kefu {
        text-align: center;
        font-size: 0.7rem;
        color: #999;
        margin: 1rem 0;
    }

    .bottomBtn {
        width: 100%;
        height: 2rem;
    }

    .bottomBtn .no {
        font-size: 0.7rem;
        color: #333;
        line-height: 2rem;
        margin: 0 2rem;
        padding: 0.5rem 0;
    }

    .bottomBtn .submit {
        padding: 0.1rem 1rem;
        background-color: #2882e1;
        font-size: 0.7rem;
        color: #fff;
        border-radius: 1rem;
        margin-bottom: -0.2rem;
    }
</style>

<body>
    <div id="app" v-cloak>
        <div class="topDiv">
            <p class="title">完成认证后即可开通在线问诊...</p>
            <p class="subtitle">完成后可登录使用祥愿堂APP</p>
            <p class="subtitle">请放心填写真实信息，我们将严格保密</p>
        </div>

        <div class="main">
            <div class="item">
                <div class="title">擅长领域(选填) <span>{{specially.length}}/1000</span></div>
                <textarea maxlength="1000" v-model="specially" placeholder="请描述您的专业领域，擅长疾病"></textarea>
            </div>

            <div class="item">
                <div class="title">个人简介(选填) <span>{{brief.length}}/1000</span></div>
                <textarea maxlength="1000" v-model="brief" placeholder="请填写您的学历，职业经历，所获荣誉"></textarea>
            </div>

            <div class="item">
                <div class="title">执业证书(最多上传五张)</div>
                <div class="upload_img">
                    <div class="img" v-for="(item,index) in imgsArr">
                        <img :src="'https://oss.zetikeji.com/'+item" alt="" style="border: 1px solid #e8e8e8;">
                        <img class="icon_del" @click="del_img(1,index)" src="../../image/icon_del.png" alt="">
                    </div>
                    <div class="img">
                        <img v-if="imgsArr.length < 5" src="../../image/icon_chat_camera.png" onclick="uploadimg(this,1)"
                            alt="">
                    </div>


                </div>
                <p class="text">
                    带有执业医院名称的是执业证书，请上传执业证书的所有内容页面（含变更页）的彩色原证件照片，不得遮挡、缺损，示例如下：
                </p>
                <div class="example">
                    <img src="../../image/example1_img.png" alt="">
                </div>
            </div>

            <div class="item">
                <div class="title">工作胸牌(选填)</div>
                <div class="upload_img">
                    <div class="img" v-for="(item,index) in imgArr">
                        <img :src="'https://oss.zetikeji.com/'+item" alt="" style="border: 1px solid #e8e8e8;">
                        <img class="icon_del" @click="del_img(2,index)" src="../image/icon_no.png" alt="">
                    </div>
                    <div class="img">
                        <img v-if="imgArr.length < 1" src="../../image/icon_chat_camera.png" onclick="uploadHeadimg(this)"
                            alt="">
                    </div>

                </div>
                <p class="text">
                    您所在医院的工牌，内容清晰，不得有遮挡缺损，示例如下：
                </p>
                <div class="example">
                    <img src="../../image/example1_img.png" alt="">
                </div>
            </div>

            <div class="tip">
                <div class="text">
                    <img src="../../image/anquan.png" alt="">
                    <p>所有证件照仅用于认证，祥愿堂严格保证您的信息安全</p>
                </div>
                <p class="kefu" onclick="kefu_call()">客服电话：4000211567 工作时间：9:00 - 21:00</p>
            </div>

            <div class="bottomBtn">
                <span class="no" onclick="no()">暂不填写</span>
                <span class="submit" onclick="submit()">提交认证材料</span>
            </div>
        </div>
    </div>
</body>

</html>
<script src="../../script/set_root.js"></script>

<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.min.js"></script>
<script type="text/javascript" src="../../script/hb.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/vant.js"></script>
<script type="text/javascript">
    apiready = function () {
        hb_ready();
    }
    //使用vue对数据进行绑定
    var app = new Vue({
        el: '#app',
        data: {
            specially: "", // 医生擅长
            brief: "", // 个人简介
            imgsArr: [], // 执业证书
            imgArr: [], // 上传的图片数组
        },
        methods: {
            del_img(cate, index) {
                if (cate == 1) {
                    this.imgsArr.splice(index, 1)
                } else {
                    this.imgArr.splice(index, 1)
                }
            }
            // looks: function (img_index) {
            //     var UIPhotoViewer = api.require('UIPhotoViewer');
            //     UIPhotoViewer.open({
            //         images: app.imgsArr,
            //         placeholderImg: 'widget://res/logo.png',
            //         bgColor: '#000',
            //         activeIndex: img_index,
            //     }, function (ret, err) {
            //         if (ret) {
            //             // alert(JSON.stringify(ret));
            //             if (ret.eventType == 'show') {
            //                 toast("再次点击即可退出")
            //             }
            //             if (ret.eventType == 'click') {
            //                 UIPhotoViewer.close();
            //             }
            //         } else {
            //             alert("网络不通畅，请稍后再试！");
            //         }
            //     });
            // },
            // look: function (img_index) {
            //     var UIPhotoViewer = api.require('UIPhotoViewer');
            //     UIPhotoViewer.open({
            //         images: app.imgArr,
            //         placeholderImg: 'widget://res/logo.png',
            //         bgColor: '#000',
            //         activeIndex: img_index,
            //     }, function (ret, err) {
            //         if (ret) {
            //             // alert(JSON.stringify(ret));
            //             if (ret.eventType == 'show') {
            //                 toast("再次点击即可退出")
            //             }
            //             if (ret.eventType == 'click') {
            //                 UIPhotoViewer.close();
            //             }
            //         } else {
            //             alert("网络不通畅，请稍后再试！");
            //         }
            //     });
            // }
        },

    })

    function submit() {
        if (app.imgsArr.length == 0) {
            toast("请至少上传一张您的执业证书")
            return;
        }
        post_ajax("doctor/verify/save", {
            userId: $api.getStorage("emp").userId,
            brief: app.brief,
            specially: app.specially,
            handImage: String(app.imgArr),
            credentialsImage: String(app.imgsArr)
        }, function (res, err) {
            if (res.code == 2000) {
                alert("提交成功，请等待审核")
                api.openWin({
                    name: "verify_tip_win",
                    url: "widget://html/doctor/verify_tip_win.html",
                })
            }

        })
    }

    function no() {
        api.confirm({
            title: '终止认证',
            msg: '您确定暂不填写认证吗？我们不会对您之前提交的信息做保存！',
            buttons: ['确定', '取消']
        }, function (ret, err) {
            var index = ret.buttonIndex;
            if (index == 1) {
                api.closeToWin({
                    name: 'main'
                });
            }
        });
        app.$nextTick(function () {
            hb_init_openwinby_click();
        })
    }

    // 上传图片
    function uploadimg(obj, indexs) {
        api.actionSheet({
            title: '请选择方式',
            cancelTitle: '取消',
            buttons: ['相册', '拍照']
        }, function (ret, err) {
            var index = ret.buttonIndex;
            switch (index) {
                case 1:
                    var trs = isJuris('photos', '需要获取您的相机权限，才能上传照片，请问是否同意？'); //相机权限
                    if (!trs) {
                        toast("获取相机权限失败")
                        return;
                    }
                    var resultList = api.hasPermission({
                        list: ['photos']
                    });
                    api.requestPermission({
                        list: ['photos'],
                        code: 1
                    }, function (ret, err) {
                        if (ret) {
                            var UIAlbumBrowser = api.require('UIAlbumBrowser');
                            if (api.systemType == 'ios') {
                                UIAlbumBrowser.imagePicker({
                                    max: 5,
                                    showCamera: false,
                                    styles: {
                                        bg: '#FFFFFF',
                                        cameraImg: 'widget://res/cameraImg.png',
                                        mark: {
                                            icon: '',
                                            position: 'bottom_left',
                                            size: 20
                                        },
                                        nav: {
                                            bg: 'rgba(0,0,0,0.6)',
                                            cancelColor: '#1883FE',
                                            cancelSize: 16,
                                            nextStepColor: '#1883FE',
                                            nextStepSize: 16
                                        }
                                    },
                                    isSystemCamera: false,
                                    animation: true,
                                }, function (ret) {
                                    // alert(JSON.stringify(ret))
                                    if (ret.eventType == 'nextStep') {
                                        // var UIAlbumBrowser = api.require('UIAlbumBrowser');
                                        UIAlbumBrowser.closePicker();
                                        if (ret.list != null && ret.list != "") {
                                            for (var i = 0; i < ret.list.length; i++) {
                                                // vm.imgs.push(ret.list[i].thumbPath);
                                                fnTransPath(ret.list[i].path, ret.list.length);

                                            }
                                            // UIAlbumBrowser模块的 transPath方法，用于iOS手机上
                                            function fnTransPath(path, imglength) {
                                                var UIAlbumBrowser = api.require(
                                                    'UIAlbumBrowser');
                                                UIAlbumBrowser.transPath({
                                                    path: path //要转换的图片路径（在相册库的绝对路径）
                                                }, function (ret, err) {
                                                    if (ret) {
                                                        //alert(JSON.stringify(ret));
                                                        // console.log(ret.path+"==ios");
                                                        // $api.attr($api.byId('imgUp'), 'src', ret.path);
                                                        ajax_upimg(ret.path, indexs);
                                                        //return ret.path;
                                                    } else {
                                                        alert("网络不通畅，请稍后再试！");
                                                    }
                                                });
                                            }
                                        }
                                    }
                                });
                            } else { //安卓
                                UIAlbumBrowser.imagePicker({
                                    max: 5,
                                    showCamera: false,
                                    styles: {
                                        bg: '#FFFFFF',
                                        cameraImg: 'widget://res/cameraImg.png',
                                        mark: {
                                            icon: '',
                                            position: 'bottom_left',
                                            size: 20
                                        },
                                        nav: {
                                            bg: 'rgba(0,0,0,0.6)',
                                            cancelColor: '#1883FE',
                                            cancelSize: 16,
                                            nextStepColor: '#1883FE',
                                            nextStepSize: 16
                                        }
                                    },
                                    isSystemCamera: false,
                                    animation: true,
                                }, function (ret) {
                                    // alert(JSON.stringify(ret))
                                    if (ret.eventType == 'nextStep') {
                                        // var UIAlbumBrowser = api.require('UIAlbumBrowser');
                                        UIAlbumBrowser.closePicker();
                                        // alert(JSON.stringify(ret))
                                        for (var i = 0; i < ret.list.length; i++) {
                                            if (ret.list[i].size > 2 * 1024 * 1024) {
                                                alert("第" + (i + 1) + "张图片过大")
                                                return
                                            } else {
                                                ajax_upimg(ret.list[i].path, indexs)
                                            }
                                        }

                                    }
                                });
                            };
                        }
                    })
                    break;

                case 2:
                    //打开拍照
                    var trs = isJuris('camera', '需要获取您的相机权限，才能上传照片，请问是否同意？'); //相机权限
                    if (!trs) {
                        toast("获取相机权限失败")
                        return;
                    }
                    var resultList = api.hasPermission({
                        list: ['camera'],
                    });
                    api.requestPermission({
                        list: ['camera'],
                        code: 1
                    }, function (ret, err) {
                        if (ret) {
                            api.getPicture({
                                sourceType: 'camera',
                                encodingType: 'jpg',
                                mediaValue: 'pic',
                                targetWidth: '780',
                                targetHeight: '1040',
                                destinationType: 'url',
                                quality: 70,
                                saveToPhotoAlbum: false
                            }, function (ret, err) {
                                if (ret && ret.data) {
                                    //返回的本地路径
                                    var returnUrl = ret.data;
                                    // app.imgsArr.push(returnUrl)
                                    ajax_upimg(returnUrl, indexs)
                                } else {
                                    //alert("网络不通畅，请稍后再试！");
                                }
                            });
                        }
                    })
                    break;
            }
        });
    }

    function uploadHeadimg() {
        api.actionSheet({
            title: '请选择方式',
            cancelTitle: '取消',
            buttons: ['相册', '拍照']
        }, function (ret, err) {
            var index = ret.buttonIndex;
            if (index == 3) {
                return
            }
            switch (index) {
                case 1:
                    //打开相册
                    var trs = isJuris('photos', '需要获取您的相册权限，才能上传照片，请问是否同意？'); //相机权限
                    if (!trs) {
                        toast("获取相册权限失败")
                        return;
                    }
                    api.getPicture({
                        sourceType: 'library',
                        encodingType: 'jpg',
                        mediaValue: 'pic',
                        targetWidth: '780',
                        targetHeight: '1040',
                        destinationType: 'url',
                        quality: 70,
                        saveToPhotoAlbum: false
                    }, function (ret, err) {
                        if (ret && ret.data) {

                            //返回的本地路径
                            var returnUrl = ret.data;

                            // if (app.headimg != "") {
                            //     app.headimg = returnUrl
                            // }

                            ajax_upimg(returnUrl)
                        } else {
                            //alert("网络不通畅，请稍后再试！");
                        }
                    });
                    break;
                case 2:
                    //打开拍照
                    var trs = isJuris('camera', '需要获取您的相机权限，才能上传照片，请问是否同意？'); //相机权限
                    if (!trs) {
                        toast("获取相机权限失败")
                        return;
                    }
                    api.getPicture({
                        sourceType: 'camera',
                        encodingType: 'jpg',
                        mediaValue: 'pic',
                        targetWidth: '780',
                        targetHeight: '1040',
                        destinationType: 'url',
                        quality: 70,
                        saveToPhotoAlbum: false
                    }, function (ret, err) {
                        if (ret && ret.data) {
                            //返回的本地路径
                            var returnUrl = ret.data;
                            // if (app.headimg != "") {
                            //     app.headimg = returnUrl
                            // }
                            ajax_upimg(returnUrl, 2)
                        } else {
                            //alert("网络不通畅，请稍后再试！");
                        }
                    });
                    break;
            }
        });
    }

    //执行ajax上传图片数组
    function ajax_upimg(returnUrl, indexs) {
        api.showProgress({
            style: 'default',
            animationType: 'fade',
            title: '',
            text: '请稍等...',
            modal: true
        });
        // alert(returnUrl)
        api.ajax({
            url: "https://api.zetikeji.com/api/storage/file",
            method: 'post',
            data: {
                values: {
                    name: 'haha'
                },
                files: {
                    file: returnUrl
                }
            }
        }, function (ret, err) {
            if (ret) {
                if (indexs == 1) {
                    app.imgsArr.push(ret.data)
                } else {
                    app.imgArr.push(ret.data)
                }
            } else {
                api.alert({
                    msg: JSON.stringify(err)
                });
            }
            api.hideProgress();
        });
    }
</script>
